<template>
    <div class="login-container">
        <div class="left-container">
            <div style="width: 100%">
                <h1 class="title">京西管理平台</h1>
                <div class="tongguanlu">
                    <span class="txt">
                        峰峦如聚 波涛如怒 山河表里潼关路 <br />
                        望西都 意踌躇 <br />
                        伤心秦汉经行处 宫阙万间都做了土 <br />
                        兴 百姓苦 亡 百姓苦 <br />
                    </span>
                </div>
            </div>
        </div>
        <div class="right-container">
            <div style="width: 100%; display: flex; justify-content: center">
                <div style="width: 60%">
                    <h2 class="login-type">
                        <span>{{ loginTypeTip }}</span>
                        <el-button :icon="Refresh" circle @click="switchLoginType" />
                    </h2>
                    <el-form ref="refLoginForm" :rules="loginFormRule" :model="loginData">
                        <el-form-item prop="username">
                            <el-input placeholder="用户名" v-model="loginData.username">
                                <template #prefix>
                                    <el-icon class="el-input__icon"><User /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="passowrd">
                            <el-input
                                placeholder="密码"
                                type="password"
                                v-model="loginData.password"
                            >
                                <template #prefix>
                                    <el-icon class="el-input__icon"><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                ref="loginBtn"
                                type="primary"
                                class="loginBtn"
                                style="width: 100%"
                                @click="loginHandle(refLoginForm)"
                                :loading="loginBtnLoading"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="width: 100%; height: 25%"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Refresh } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useAuthStore } from '@/stores/authStore'
import authUtil from '@/utils/authUtil'

const authStore = useAuthStore()

let loginBtn = ref<HTMLButtonElement>()

const refLoginForm = ref<FormInstance>()
interface LoginDataType {
    username: string
    password: string
    type: string
}

let loginBtnLoading = ref(false)

// 登录数据
const loginData = reactive<LoginDataType>({
    username: 'superAdmin',
    password: '123456',
    type: 'seller'
})

// 登录表单校验
const loginFormRule = reactive<FormRules<LoginDataType>>({
    username: [{ required: true, message: '请输入用户名' }],
    password: [{ required: true, message: '请输入登录密码' }]
})

// 平台类型提示文本
const loginTypeTip = computed(() => {
    return loginData.type === 'platform' ? '平台端' : '商家端'
})

// 清空登录数据
const clearLoginData = () => {
    loginData.username = ''
    loginData.password = ''
}

// 切换登录平台类型
const switchLoginType = () => {
    clearLoginData()
    loginData.type = 'platform' === loginData.type ? 'seller' : 'platform'
    authUtil.setChannelType(loginData.type)
}

// 登录
const loginHandle = (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return
    }
    formEl.validate(async (valid, fields) => {
        if (valid) {
            loginBtnLoading.value = true
            await authStore.login(loginData)
        } else {
            console.log('校验失败:')
            loginBtnLoading.value = false
            console.table(fields)
        }
    })
}

// 键盘事件
const onKeyUpListener = (e: any) => {
    if ('Enter' === e.key) {
        loginBtn.value?.click()
    }
}

onMounted(() => {
    // 查询按钮
    loginBtn.value = document.querySelector('.loginBtn') as HTMLButtonElement
    // 添加键盘事件
    document.addEventListener('keyup', onKeyUpListener)
    authUtil.setChannelType('platform')
})

onBeforeUnmount(() => {
    // 移除键盘事件
    document.removeEventListener('keyup', onKeyUpListener)
})
</script>

<style scoped lang="scss">
.login-container {
    .left-container {
        background-color: #636fe7;
        height: 100vh;
        width: 75%;
        display: flex;
        float: left;
        align-items: center;
        .title {
            color: #fff;
            font-weight: 900;
            font-size: 36px;
            display: inline-block;
            width: 70%;
            text-align: center;
            user-select: none;
        }
        .tongguanlu {
            width: 100%;
            display: flex;
            justify-content: center;
            .txt {
                writing-mode: vertical-rl;
                line-height: 60px;
                font-size: 16px;
                color: #e0d4d4;
                font-weight: 600;
                user-select: none;
            }
        }
    }

    .right-container {
        width: 25%;
        height: 100vh;
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #f5f5f5;

        .login-type {
            display: inline-block;
            width: 100%;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            font-weight: 700;

            button {
                background-color: #f5f5f5;
                color: #409eff;
                border: none;
            }
        }
    }
}
</style>
